import React, { Suspense } from 'react'
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
import page from './page'
import BeforeEach from './BeforeEach'
import { routerItem } from '../interface'

const Index = () => {
    const mapRouters = (routers: routerItem[]) => {
        return routers.map((item: routerItem, ind: number) => {
            return item.path ? <Route key={ind} path={item.path} element={<BeforeEach>{item.element}</BeforeEach>}>
                {
                    item.children && mapRouters(item.children)
                }
            </Route> : <Route key={ind} path={item.form} element={<Navigate to={item.to as string}></Navigate>}></Route>
        })
    }

    return (
        <Suspense fallback={<div>加载中。。。</div>}>
            <BrowserRouter>
                <Routes>
                    {
                        mapRouters(page)
                    }
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default Index
